<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <p>{{message.toUpperCase()}}</p>
        <hr>
        <p>{{ msg }}</p>
        <hr>
        <p>{{firstName}} {{lastName}}</p>
        <p>{{fullName}}</p>
        <p><button type="button" @click="changeFullName">按钮</button></p>
    </div>
    <script src="./assets/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                message: 'hello vuejs',
                firstName: '张',
                lastName: '三'
            },
            methods: {
                changeFullName() {
                    // 修改计算属性: 自动调用set方法
                    this.fullName = '李 四'
                }
            },
            /**
             * 计算属性
             * 作用：处理data中的数据
             * 使用方式：与data中的数据一致
             */
            computed: {
                // 属性名是计算属性的名称,属性值是计算函数
                // 简化： 函数就是get方法
                msg: function() {
                    // 处理数据的过程...
                    // 拆分字符串
                    let array = this.message.split(' ');
                    array.reverse();
                    let result = array.join(' ');
                    // 计算函数必须有返回值
                    return result.toUpperCase();
                },
                // 完整
                fullName: {
                    // 计算属性值可以是一个对象，在对象中包含了两个名称固定的函数
                    // get获取计算属性的值，函数必须有返回值
                    get: function() {
                        return this.firstName + ' ' + this.lastName;
                    },
                    // set设置计算属性的值，函数必须有参数
                    set: function(param) {
                        console.log('set.....');
                        let array = param.split(' ');
                        this.firstName = array[0];
                        this.lastName = array[1];
                    }
                }
            }
        });
    </script>
</body>
</html>